<template>
  <div class="homeview">
    <div class="block text-center">
      <!-- <span class="demonstration">each carousel-item has a different height</span> -->
      <el-carousel height="auto" autoplay style="height: 750px">
        <el-carousel-item style="height: 750px">
          <div class="el-carousel-info">
            <img src="../../assets/img/bannerimg/banner1.jpg" alt />
            <!-- <div class="home_info"> -->
            <!-- <h1>旅游界面系统是一个综合的旅游管理和信息展示平台，致力于为用户提供全面的旅游信息、个性化的行程规划和方便的旅行体验。通过整合各种旅游资源和提供丰富的功能，该系统旨在帮助用户轻松地探索旅游目的地、获取相关信息，并规划自己的旅行行程。</h1> -->
            <!-- </div> -->
          </div>
        </el-carousel-item>
        <el-carousel-item style="height: 750px">
          <div class="el-carousel-info">
            <img src="../../assets/img/bannerimg/banner2.jpg" alt />
            <!-- <div class="home_info"> -->
            <!-- <h1>
                对于游客：旅游界面系统提供丰富的旅游信息，帮助他们了解目的地特点并规划自己的旅行行程。用户可以通过系统获取个性化的旅行建议，发现最适合自己的景点和路线，实现更满意和充实的旅行体验。
                对于旅游服务提供商：旅游界面系统为旅游服务提供商提供了一个平台来展示他们的目的地、景点和活动。提供商可以通过系统在广大用户面前宣传他们的产品和服务，吸引更多潜在游客的关注和兴趣。
            </h1>-->
            <!-- </div> -->
          </div>
        </el-carousel-item>
        <el-carousel-item style="height: 750px">
          <div class="el-carousel-info">
            <img src="../../assets/img/bannerimg/banner3.jpg" alt />
            <!-- <div class="home_info"> -->

            <!-- <h1>
                旅游界面系统是一个全面的旅游管理和信息展示平台，致力于帮助用户规划和享受愉快的旅行体验。用户可以从系统中获取丰富的旅游信息，个性化地规划行程，同时与其他用户分享旅行经验和意见。旅游界面系统为用户提供了更智能、便捷的旅行辅助工具，而对于旅游服务提供商则提供了一个可靠的渠道来推广他们的产品。
                希望以上介绍对你有所帮助！如果有其他问题，请随时提问。
            </h1>-->
            <!-- </div> -->
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="home_content_box">
      <div class="home_content_box_top">
        <h1>无忧行,畅享人生美好旅途</h1>
      </div>
      <div class="home_content_box_bottem">
        <div class="home_content_box_item">
          <img src="../../assets/img/trou.png" alt />
          <span>
            无忧行系统是一个综合的旅游管理和信息展示平台，
            致力于为用户提供全面的旅游信息、个性化的行程规划
            和方便的旅行体验。通过整合各种旅游资源和提供丰富的
            功能，该系统旨在帮助用户轻松地探索旅游目的地、获取
            相关信息，并规划自己的旅行行程。
          </span>
        </div>
        <div class="home_content_box_item">
          <img src="../../assets/img/trou.png" alt />
          <span>
            对于游客：无忧行系统提供丰富的旅游信息，帮助他们
            了解目的地特点并规划自己的旅行行程。用户可以通过系
            统获取个性化的旅行建议，发现最适合自己的景点和路线，
            实现更满意和充实的旅行体验。对于旅游服务提供商：旅
            游界面系统为旅游服务提供商提供了一个平台来展示他们
            的目的地、景点和活动。提供商可以通过系统在广大用户
            面前宣传他们的产品和服务，吸引更多潜在游客的关注和
            兴趣。
          </span>
        </div>
        <div class="home_content_box_item">
          <img src="../../assets/img/trou.png" alt />
          <span>
            无忧行系统是一个全面的旅游管理和信息展示平台，致
            力于帮助用户规划和享受愉快的旅行体验。用户可以从系
            统中获取丰富的旅游信息，个性化地规划行程，同时与其
            他用户分享旅行经验和意见。旅游界面系统为用户提供了
            更智能、便捷的旅行辅助工具，而对于旅游服务提供商则
            提供了一个可靠的渠道来推广他们的产品。希望以上介绍
            对你有所帮助！如果有其他问题，请随时提问。
          </span>
        </div>
      </div>
    </div>
    <div class="home_footer_box">
      <div class="home_footer_box_top">
        <h1>

        无忧行！三大功能模块
        </h1>
      </div>
      <div class="home_footer_box_bottem">
        <div class="home_footer_box_item">
          <img src="../../assets/img/cardimg/1.png" alt />
          <h2>景区模块</h2>
          <div class="home_footer_box_info">系统提供最新的旅游资讯，包括热门景点。用户可以随时在系统中获取旅游相关的最新信息，以便做出更明智的旅行决策。</div>
          <router-link to="/ScenerySpot" style="text-decoration: none;">
            <div class="go_info_list">跳转页面</div>
          </router-link>
        </div>
        <div class="home_footer_box_item">
          <img src="../../assets/img/cardimg/2.png" alt />

          <h2>景点分析模块</h2>
          <div
            class="home_footer_box_info"
          >旅游界面系统提供全面的目的地信息，包括景点介绍、文化背景、当地风俗和特色活动等。用户可以通过系统浏览和了解不同目的地的特点和亮点，帮助他们做出更好的旅行决策，用户可以通过公告获取优质的旅行建议，了解最佳的景点顺序和交通路线，从而优化他们的旅行计划。</div>
          <router-link to="/SceneryPoint" style="text-decoration: none;">
            <div class="go_info_list">跳转页面</div>
          </router-link>
        </div>
        <div class="home_footer_box_item">
          <img src="../../assets/img/cardimg/3.png" alt />

          <h2>评论模块</h2>
          <div
            class="home_footer_box_info"
          >旅游界面系统允许用户在系统中留下评论和评级，分享他们的旅行经历和意见。其他用户可以通过这些评论和评级了解他人的真实体验，从而更好地选择合适的旅游目的地和活动。</div>
          <router-link to="/ReView" style="text-decoration: none;">
            <div class="go_info_list">跳转页面</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
.text-center {
  height: 750px;
  // background-color: aqua;
}
.el-carousel {
  height: 800px;
  // color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}
.carousel-item {
  // color: #475669;
  // opacity: 0.75;
  margin: 0;
  text-align: center;
}
.dv-border-box-4 {
  height: 200px;
}
.el-carousel__item .el-carousel-info {
  // color: #475669;
  // opacity: 0.75;
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  // background-color: antiquewhite;
  // height: 900px;
}
.el-carousel-info > img {
  width: 100%;
  height: 100%;
  // object-fit: cover;
}
.home_footer_box {
  margin: 0 auto;
  width: 100%;
  height: 90vh;
  // background-image: linear-gradient(25deg, #0981f3, #6494e7, #8aa9da, #a7becc);
  // height: 50%;
  overflow: hidden;
  // margin-top: 230px;
  padding-top: 15px;
  // margin-bottom: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .home_footer_box_top{
    width: 100%;
    color: rgb(0, 0, 0);
    font-size: 30px;
    font-family: '楷体';
    text-align: center;
    height: 100px;
    letter-spacing: 30px;
  }
  .home_footer_box_bottem{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;

    .home_footer_box_item {
      border: 1px solid rgb(0, 0, 0);
      background-color: white;
      text-align: center;
  
      height: auto;
      overflow: hidden;
      width: 20%;
      img {
        width: 100%;
      }
      .home_footer_box_info {
        height: 150px;
        padding: 10px;
        // background-color: aquamarine;
      }
      // transition: 1s;
      .go_info_list {
       padding-top: 15px;
       margin-top: 30px;
        height: 40px;
        width: 100%;
        // color: rgb(0, 0, 0);
        background-color: antiquewhite;
        font-size: 20px;
        // font-weight: 900;
        cursor: pointer;
        transition: 1s;
      }
      .go_info_list:hover {
       padding-top: 15px;
       margin-top: 30px;
        height: 40px;
        width: 100%;
        // color: rgb(0, 0, 0);
        // background-color: rgb(134, 122, 107);
        font-size: 20px;
        // font-weight: 900;
        // border: 1px solid rgb(0, 255, 255);
        cursor: pointer;
      }
    }
  }
  margin-bottom: 120px;
}
.home_content_box {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-image: linear-gradient(25deg, #a6a6ac, #ffffff, #bfc0ba);
  display: flex;
  flex-direction: column;
  justify-content: center;
  // margin-top: 10px;
  padding-top: 50px;
  .home_content_box_top {
    margin: 0 auto;
    width: 60%;
    height: 100px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-family: "楷体";
  }
  .home_content_box_bottem {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto;
    height: 90vh;
    .home_content_box_item {
      overflow: hidden;
      width: 20%;
      height: 80%;
      color: #000000;
      // background-color: red;
      border: rgb(0, 183, 255) solid 3px;
      text-align: center;
      background-color: white;
      padding: 40px;
      transition: 1s;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      text-align: center;
      span{
        font-size: 20px;
margin-top: 40px;
      }
    }
    .home_content_box_item > img {
      width: 100px;
      margin: 0 auto;
    }
    .home_content_box_item:hover {
      // color: #90a0b2;
      // outline: 2px solid #e8e8e8;
      background-color: white;

      box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);
      border-color: #0974f1;
      // background: transparent;
      border-radius: 20px;
      // color: #e8e8e8;
    }
    @media (min-width: 1700px) {
      .home_content_box_item {
        width: 20%;
        height: 60%;
        color: #000000;
        // background-color: red;
        border: rgb(0, 183, 255) solid 3px;
        text-align: center;
        background-color: white;
        padding: 40px;
        transition: 1s;
        font-size: 15px;
        border-radius: 10px;
        cursor: pointer;
      }
    }
  }
}
// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }
</style>